<script>
import { gsap,} from 'gsap';

import { ScrollTrigger } from "gsap/ScrollTrigger";
export default{
    methods:{
        show(){
             gsap.registerPlugin(ScrollTrigger)
             ScrollTrigger.create({
             trigger:'.boxfive',
              start:'top top',
              end:'+=9000',
              scrub:true,
             pin:true,
            //  markers:true,
             animation:gsap.timeline()
             .to('.boxfive',{scale:0.9},'<')
             .to('.five_setion1',{left:"-400%",},'<')
             .to('.five_setion2',{left:"-300%",},'<')
             .to('.five_setion3',{left:"-200%",},'<')
             .to('.five_setion4',{left:"-100%",},'<')
             .to('.five_setion5',{left:0},'<')
             })
        }
    },
    mounted(){
        this.show()
    },
}
</script>
<template>
    <div class="boxfive">
        <div class="five_setion1"></div>
        <div class="five_setion2"></div>
        <div class="five_setion3"></div>
        <div class="five_setion4"></div>
        <div class="five_setion5"></div>
    </div>
</template>

<style lang="less" scoped>
.boxfive{
    position: relative;
    // background-color: #140e0e;
    box-sizing: border-box;
    border-radius: 12px;
    overflow: hidden;
    // width: 100%;
    .five_setion1{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      position: absolute;
      left: 0px;
      top: 0;
      background-image: url('../assets/1.jpg');
    }
    .five_setion2{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: yellowgreen !important;
      position: absolute;
      left: 100%;
      background-image: url('../assets/2.jpg');
      top: 0;
    }
    .five_setion3{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: yellowgreen !important;
      position: absolute;
      left: 200%;
      background-image: url('../assets/3.jpg');
      top: 0;
    }
    .five_setion4{
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      background-color: yellowgreen !important;
      position: absolute;
      left: 300%;
      background-image: url('../assets/4.jpg');
      top: 0;
    }
    .five_setion5{
      width: 100%;
      height: 100%;
      background-position-x: 56%;
      box-sizing: border-box;
      background-color: yellowgreen !important;
      position: absolute;
      left: 400%;
      background-image: url('../assets/5.jpg');
      top: 0;
    }
}
</style>